<template>
  <div class="app-container customer-page-box">
    <div class="search">
      <div class="top">
        <p>高级搜索</p>
      </div>
      <div class="bottom">
        <el-form
          ref="queryForm"
          class="cus-search-box"
          :inline="true"
          label-width="100px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="线索ID：" prop="id" width="300">
                <el-input
                  v-model="form.id"
                  placeholder="请输入线索ID"
                  clearable
                />
              </el-form-item>
              <el-form-item label="创建时间：" prop="createTime">
                <el-date-picker
                  v-model="dateList"
                  clearable
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getDate"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号：" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="线索状态：" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择线索状态"
                  clearable
                >
                  <el-option
                    v-for="dict in statusList"
                    :key="dict.id"
                    :label="dict.value"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="渠道来源：" prop="channel">
                <el-select
                  v-model="form.channel"
                  placeholder="请选择渠道来源"
                  clearable
                >
                  <el-option
                    v-for="dict in channelList"
                    :key="dict.id"
                    :label="dict.value"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="search-btn wp-50">
            <el-button
              class="cus-search-btn"
              type="primary"
              @click="search"
            >搜索</el-button>
            <el-button class="cus-reset-btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="cus-btn-box">
      <div class="cus-btn-con">
        <div>
          <el-button
            class="primary-btn"
            @click="openDailog"
          >+ 新建线索</el-button>
          <el-button
            class="default-btn"
            @click="openUpload"
          >+ 批量添加</el-button>
        </div>
        <div><el-button
          class="default-btn"
          :disabled="num>1? false : true"
          @click="openAllots"
        >+ 批量分配</el-button></div>
      </div>
    </div>

    <!-- <el-checkbox :disabled="row.status==='1'? false : true" /> -->

    <div>
      <div>
        <el-table
          ref="table"
          v-loading="isLoading"
          class="cus-table-box"
          stripe
          :data="list"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column
            label="线索ID"
            align="center"
            min-width="80"
            prop="id"
          />
          <el-table-column
            label="手机号"
            align="center"
            min-width="100"
            prop="phone"
          />
          <el-table-column
            label="渠道来源"
            align="center"
            min-width="100"
            prop="channel"
          >
            <template #default="{row}">
              {{ editChannel(row.channel) }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            min-width="140"
            sortable
            prop="createTime"
          />
          <el-table-column
            label="归属人"
            align="center"
            min-width="100"
            prop="owner"
          />
          <el-table-column
            label="线索状态"
            align="center"
            prop="status"
            min-width="100"
          >
            <template #default="{row}">
              {{ editStatus(row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="200"
            class-name="small-padding fixed-width"
          >
            <!--  slot-scope="scope" -->
            <template #default="{row}">
              <el-button
                size="mini"
                type="text"
                @click="getClueData(row.id,'look')"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="row.status==='1'? true : false"
                @click="getClueData(row.id,'genJ')"
              >跟进</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="row.status!=='1'? true : false"
                @click="openAllot(row.id)"
              >分配</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-container">
          <div class="txt">您已选{{ num }}条</div>
          <el-pagination
            background
            :current-page="Number(form.page)"
            :page-sizes="[10, 50, 100, 150]"
            :page-size="Number(form.pageSize)"
            layout="total, prev, pager, next, sizes"
            :total="Number(total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- <empty
        style="height: calc(100vh - 66px - 66px - 215px - 83px)"
        class="table-empty-box"
      /> -->
    </div>
    <!-- 弹窗-新增-->
    <addClub ref="add" :visible.sync="visible" />
    <!-- 弹窗-上传文件 -->
    <addUpload :upload-show.sync="uploadShow" />
    <!-- 弹窗, 分配 -->
    <allotClub ref="allot" :allot-show.sync="allotShow" :num.sync="num" :arr="arr" />
  </div>
</template>

<script>
import addClub from '../components/addClub.vue'
import addUpload from '../components/addUpload.vue'
import allotClub from '../components/allotClub.vue'
import { getClueListApi, getTreeListApi } from '@/api/clue'
import { Message } from 'element-ui'
export default {
  components: {
    addClub,
    addUpload,
    allotClub
  },
  data() {
    return {
      // 分配弹窗
      allotShow: false,
      // 批量添加弹窗
      uploadShow: false,
      // 添加弹窗显示隐藏
      visible: false,
      dateList: [], // 日期
      isLoading: false,
      // 选择条数
      num: 0,
      form: {
        page: 1,
        pageSize: 10,
        id: null, // 线索id
        phone: null, // 手机号
        owner: null, // 线索归属
        createTime: null, // 创建时间
        endTime: null, // 结束时间
        status: null, // 线索装态
        channel: null// 渠道来源
      },
      rules: {

      },
      // 线索状态列表
      statusList: [{ id: '1', value: '未分配' }, { id: '2', value: '已分配' }],
      // 渠道来源
      channelList: [{ id: '0', value: '线上活动' }, { id: '1', value: '推广介绍' }],
      total: 20,
      list: [],
      chekcsRows: [],
      arr: []// 批量分配数组
    }
  },
  created() {
    this.getClueList()
  },
  methods: {

    /**
     * 重置搜索
     */
    reset() {
      this.dateList = []
      this.form = {
        page: 1,
        pageSize: 10,
        id: null, // 线索id
        phone: null, // 手机号
        owner: null, // 线索归属
        createTime: null, // 创建时间
        endTime: null, // 结束时间
        status: null, // 线索装态
        channel: null// 渠道来源
      }
      this.getClueList()
    },
    /**
     * 处理时间
     */
    getDate(date) {
      this.form.createTime = date[0]
      this.form.endTime = date[1]
    },
    /**
     * 格式化线索状态
     */
    editStatus(val) {
      const res = this.statusList.find(e => e.id === val)
      return res?.value
    },
    /**
     * 格式化渠道
     */
    editChannel(val) {
      const res = this.channelList.find(e => e.id === val)
      return res.value
    },
    /**
     *查看点击
     */
    async getClueData(id, key) {
      this.$router.push({
        path: '/with',
        query: {
          id,
          key
        }
      })
      // this.$router.push(`/with?id=${id},key=${key}`)
    },
    /**
     * 搜索
     */
    async search() {
      this.page = 1
      this.getClueList()
    },
    /**
     * 获取列表
     */
    async getClueList() {
      this.isLoading = true
      const { data } = await getClueListApi(this.form)
      this.list = data.records
      this.total = data.total
      this.isLoading = false
    },
    /**
     * 多选框选择事件
     */
    handleSelectionChange(data) {
      this.num = data.length
      this.arr = data.map(e => ({ clueId: e.id }))
    },
    /**
     * 分配
     */
    openAllot(id) {
      this.num = 1
      this.arr.push({ clueId: id })
      this.allotShow = true
      this.getTreeList()
    },
    /**
     *  批量分配
     */
    openAllots() {
      this.allotShow = true
      this.getTreeList()
    },
    /**
     * 获取树状列表
     */
    async getTreeList() {
      const res = await getTreeListApi()
      if (res.code === 500) {
        Message.error('获取部门列表失败！')
        return
      }
      this.$refs.allot.options = res.data
    },
    /**
     * 批量添加
     */
    openUpload() {
      this.uploadShow = true
    },
    /**
     * 新建线索 打开弹窗
     */
    openDailog() {
      this.visible = true
    },
    /**
     * 切换页
     */
    handleCurrentChange(val) {
      this.form.page = val
      this.getClueList()
    },
    /**
     * 切换页容量
     */
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getClueList()
    }
  }
}
</script>
<style scoped lang='scss'>
 ::v-deep .cus-search-box .el-input__inner{
  width: 300px!important;
}
::v-deep .el-form-item__label{
  font-weight: 400;
  color: #333;
}
.top{
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  padding-left: 20px;
  border-radius: 5px;
  margin-top: -20px;
  font-weight: 500;
}
.bottom{
  border: 2px solid #f2f2f2;
  padding: 20px 30px 5px 30px;
}
.search-btn{
    text-align: right;
  }
  .wp-50{
    width: 100% !important;
  }
  .cus-btn-box{
    height: 83px;
    line-height: 83px;
    background: #fff;
    .label{
      width: 100px;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      color: #332929;
      .num{
        font-size: 14px;
        font-weight: 700;
        color: var(--current-color);
      }
    }
    .cus-btn-con{
      display: flex;
      justify-content: space-between;
      flex: 1;
      text-align: right;
      .el-button{
        // width: 132px;
        height: 40px;
        line-height: 40px;
        background: #3366ff;
        border-radius: 20px;
        font-size: 14px;
        color: #FFF;
        padding: 0 30px;
        border: 0;
        margin-left: 20px;
      }
      .primary-btn{
        background: #3366ff;
        color: #ffffff;
        &:hover{
          background: green;
        }
      }
      .default-btn{
        &:hover{
          background: #8DF;
          color: #ffffff;
        }
      }
    }
  }
  .page-container{
    display: flex;
    justify-content: space-between;
    padding:4px 0px;
    text-align: right;
    .txt{
      width: 150px;
      margin-top: 12px;
    }
  }
   ::v-deep .el-range-separator{
  width: 20px;
 }
</style>
